<template>
  <div class="page-bg">
    <div class="edit-page">
      <div class="item">
        <div class="label">标题:</div>
        <el-input
          placeholder="请输入"
          maxlength="100"
          v-model="pageData.title"
          show-word-limit
        />
      </div>

      <div class="item">
        <div class="label">图片-单张:</div>
        <formImg
          width="200"
          v-model="pageData.img"
          @pickImg="pickImg('img')"
        />
      </div>

      <div class="item">
        <div class="label">图片-最多3张-可以拖拽排序:</div>
        <formImg
          v-model="pageData.imgList"
          @pickImg="pickImg('list', $event)"
          :max="3"
        />
      </div>

      <div class="item">
        <div class="label">富文本编辑器:</div>
        <editor ref="editorRef" @selectImg="pickImg('editor')" />
      </div>

      <div
        class="footer flex"
        :class="{
          false: sysStore.isCollapse,
        }"
      >
        <el-button type="primary" @click="subForm">确定</el-button>
        <el-button>取消</el-button>
      </div>
    </div>

    <layerImg v-model="imgOption.show" @getImg="getImg" />
  </div>
</template>

<script lang="ts">
export default {
  name: "GoodsEdit",
};
</script>

<script setup lang="ts">
import { useSysStore } from "@/store/sys";
import { layerImg, formImg, useImgHook } from "@/components/formImg";
import editor from "@/components/editor/index.vue";
import { ElMessage } from "element-plus";
import config from "@/common/config";

const sysStore = useSysStore();

const pageData = reactive<any>({
  title: "",
  imgList: ['other/verify1.jpg'],
  img: "",
});

const editorRef = ref<any>(null);

onMounted(() => {
  //编辑器默认值
  editorRef.value.content = "<h2>点击左上角图片按钮插入图片试试~</h2>";
});

const { imgOption, pickImg } = useImgHook();

function getImg(data: any) {
  console.log(data,111)

  //多图上传
  if (imgOption.option.name === "list") {
    if (imgOption.option.index != -1) {
      pageData.imgList[imgOption.option.index] = data.imgUrl;
    } else {
      pageData.imgList.push(data.imgUrl);
    }
  }
  //单图上传
  if (imgOption.option.name === "img") {
    pageData.img = data.imgUrl;
  }
  //编辑器图片上传
  if (imgOption.option.name === "editor") {
    editorRef.value.editorObj.execCommand(
      "inserthtml",
      `<p><img style='max-width:100%' src='${config.qnUrl}${data.imgUrl}'/></p>`
    );
  }
}
//提交
function subForm() {
  ElMessage.warning("该功能需要自行开发");
  console.log("详情", editorRef.value.content);
}
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 20px;
}

.label {
  line-height: 30px;
}

.edit-page {
  padding-bottom: 50px;
}
.footer {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 100%;
  padding: 10px 20px;
  position: fixed;
  left: 200px;
  bottom: 0px;
  justify-content: flex-start;
  background: #fff;
  z-index: 2000;
  &.false {
    left: 64px;
  }
  .el-button {
    width: 100px;
  }
}
html.dark {
  .footer {
    background: #000;
  }
}
</style>
